<!--
 * @Author: your name
 * @Date: 2022-01-08 10:03:27
 * @LastEditTime: 2022-01-09 12:37:02
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \am\am\am-dashboard\src\pages\m2\components\Bottom3.vue
-->

<template>
  <!--1. 容器 -->
  <div ref="bottom3_container" id="container" style="height: 95%"></div>
</template>

<script>
import {Bar} from '@antv/g2plot';
export default {
  data (){
    return{
       dataArr:[ { year: '粥', value: 138 },
  { year: '米饭', value: 152 },
  { year: '面食', value: 117 },
  { year: '麻辣烫', value: 59 },
  { year: '火锅', value: 48 }
  
    ]
     }
  },
created(){
  
},
mounted(){
this.initChart()
},
methods:{
initChart(){
  const bar = new Bar(this.$refs.bottom3_container,{
    data:this.dataArr,
  xField: 'value',
  yField: 'year',
  seriesField: 'year',
  legend: {
    position: 'top-left',
  },
});

bar.render();
}
}
}
</script>

<style scoped>

</style>